<template  >
<div>
    <my-hearder></my-hearder>
     <main style="background-color: #f2f2f2;margin: 0;padding: 0;">
        <div>
        <div :style="{'position':'absolute','top':'0','width':'100%','height':height,'background-color':'rgba(0, 0, 0, 0.5)','z-index':'1200',visibility:(hidden?'hidden':'visible')}">
        <div class='kuang' :style="{'background-color':'white','width':'380px','height':'130px','border-radius':'5px','position':'sticky','top':'calc(50% - 65px)','left':'calc(50% - 190px)',display:'flex','justify-content':'space-evenly', 'flex-wrap':'wrap',padding: '20px'}">
        <h3  style='padding: 10px;
    width: 380px;
    text-align: center;
    font-size: 23px;
    font-weight: 400;height: 40px;
    line-height: 40px;'>{{pay?'确认是否租房':'确认是否加入清单'}}</h3>
        <span @click='cancel'>取消</span>
         <span @click='login2'>确认</span>
        </div>
        </div>
            <div style="width:1190px;margin: 0 auto;height: 45px;background-image: url(/img/dizhi3x.png);background-repeat: no-repeat;background-position: left;">
                <ul class="tou" style="margin: 0;padding: 0;list-style: none;">
                    <li><img src="" alt=""><span>巴乐兔{{city}}站</span></li>
                    <li>></li>
                    <li><span id='text2'>{{this.$route.query.type?'求租专区':'出租专区'}}</span></li>
                    <li>></li>
                    <li><span id='text2'>帖子详情</span></li>
                </ul>
            </div>
        </div>
        <div class="p-main" >
            <div style="position: relative;">
                <div class="p-mx clear">
                    <div style="float: left;">
                        <div class="clear">
                            <div>
                                <ul :style="{'margin-top':`${-450*num}px`,'transition':'.5s','font-size':0}" >
                                    <li v-for="str,i of img" :key="i"><img v-lazy="str" ></li>
                                </ul>
                            </div>
                            <div data-select>
                                <div @click='previous'><span>&nbsp;</span></div>
                                <div>
                                    <ul  @click="axx" :style="{'margin-top':num<2||img.length<4?0:num<img.length-1?`${-130*(num-1)}px`:`${-130*(num-2)}px`,'transition':'.5s'}">
                                        <li v-for="str,i of img" :key="i"><img :data-num='i'   :class="{on_choose:num==i}" v-lazy="str" alt=""></li>
                                    </ul>
                                </div>
                                <div @click="next"><span>&nbsp;</span></div>
                            </div>

                        </div>
                        <div style="    padding: 20px;
    margin-top: 30px;
    background-color: white;">
                            <h3 style="font-size: 25px;font-weight: 500;margin-bottom: 20px;">更多描述</h3>
                            <p style="overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
    font-size: 15px;">{{data.hdesc}}</p>
                        </div>
                        <div class="p-pl">
                            <div>
                                <span>评论<span style="font-size:16px">({{0}})条</span></span>
        
                            </div><div>

                            <ul>
                                <li class="clear" v-for='item,i of datapl' :key='i' style="    padding-bottom: 20px;
    margin: 15px 0px;
    border-bottom: 2px solid #ededed;">
                                    <div style="float:left"> <img src="/img/defaultd@3x.png" alt="" style="width:50px"></div>
                                    <div style="float:left;font-size:14px;margin-left:10px"><span>{{item.mobile}}</span>
                                    <p style="padding-left:15px;padding-top: 10px;">{{item.r_info}}</p>
                                    <span style="color:#6286b1;padding-top: 5px;" @click="huiw">回复
<div :style="{width:'550px',display:huifu?'block':'none'}">
                                        <el-input class="bd"
  type="text"
  :placeholder="pac"
  v-model="text1"
  maxlength="32"
  show-word-limit
>
</el-input> <span style="    width: 53px;
    text-align: center;
    height: 39px;
    background-color: #3f404c;
    position: absolute;
    line-height: 39px;
    color: white;" @click='pjw'>回复</span></div>
                                    </span>
                                    </div>
                                </li>
                            </ul>
                            </div>
                            <div style="padding: 15px 15px 0 15px;
    height: 40px;">
                                <el-input class="bd"
  type="text"
  :placeholder="pac"
  v-model="text"
  maxlength="32"
  show-word-limit
>
</el-input></div>
<div style="border-top: 0px;
    margin-top: 6px;
    margin-left: 662px;
    margin-right: 30px;
    text-align: center;
    background-color: rgb(59, 56, 56);
    line-height: 35px;
    font-size: 14px;
    color: white;" @click="pl">评论</div>
                        </div>

                    </div>
                    <div class="fu"  >
                    <div  :style="{width:'383px',position:'absolute',height:'545px','background-color':'rgba(0, 0, 0, 0.4)',padding:'8px',top:'-10px',left:'-10px','z-index':'100',display:(ds?'block':'none')}" style="background-image: url(/img/tuzhang.png);
    background-position: center;
    background-repeat: no-repeat;"></div>
                        <div>
                            <div>
                                <h1>{{data.sname}} <div style="    position: absolute;
    text-align: center;
    width: 100px;
    top: 0px;
    height: 31px;
    line-height: 31px;
    font-size: 18px;
    right: -14px;
    background-image: url(/img/zhaoshiyou_icon.png);
    color: white;">转租</div> </h1>
                                <p>入住日期 <span style='float:right;font-size:25px;color:#ee3843;font-weight: bold;'>{{data.hprice}}元</span></p>
                            </div>
                            <div>
                                <ul class="clear">
                                    <li v-for="str,i of tag" :key="i"><span>{{str}}</span></li>
                                </ul>
                            </div>
                            <div class="qfd" style="
    margin: 20px 0px;">
                                <div style="float:left">
                                    <img src='/img/defaultd@3x.png' style="margin-top: 5px;
    width: 50px;">
                                </div>
                                <div style="float:left;margin-left:20px">
                                   <p>{{data.h_phone}}</p>
                                   <p>{{suiji}}天前发布</p>
                                </div>
                                <div class="ly">
                                    留言
                                </div>
                                 </div>

                        </div>
                    </div>
                </div>
         
            </div>
        </div>
    </main>
    <my-footer></my-footer>
    </div>
</template>

<script>
import chuan from '../../public/js/chuan.js';
import MyFooter from '../components/MyFooter.vue';
import {mapState} from 'vuex';
export default {
  components: { MyFooter},
    data(){
        return{
            text1:'',
            text: '',
      textarea: '',
            suiji:Math.floor(Math.random()*10)+1,
            ds:'',
            pay:0,
            value: 0,
            food:'',
            shopping:'',
            life:'',
            pay:'',
            dz:'',
            type:'',
            price:'',
            hname:'',
            mj:'',
            hx:'',
            traffic:'',
            floor:[],
            tag:[],
            num:0,
            img:[],
            pac:'请输入',
            sty:{
                transition:'.4s',
                'margin-top':'200px'
            },
            data:[],
            jd:'',
            wd:'',
            qu:'',
            yu:'',
            hidden:true,
            height:'',
            scrolltop:'',
            goods:'',
            img:[],
            tag:[],
            datapl:[],
            huifu:false,
        }
    },
    computed:{
        ...mapState(['login','userName','city','cid'])
    },
    methods:{
        AddScroll () {
    document.body.style.overflow = "visible";
  },
  // 禁止页面滚动
  RemoveScroll () {
    document.body.style.overflow = "hidden";
  },
  cancel(){
      this.hidden=true;
      this.pay=0;
      this.AddScroll();
  },
  huiw(){
     this.huifu=true;
  },
  pjw(){
       if(!this.login){
          this.$router.push({name:'login',query:{history:1}})
      }else{
         if(this.text1.replaceAll(" ", "")==''){
             this.pac='请输入内容'
         }else{
            console.log(this.userName,this.text1);
            this.datapl.push({r_info:this.text1,mobile:this.userName})
            this.text1=''
         } 
      }
  },
  pl(){
      if(!this.login){
          this.$router.push({name:'login',query:{history:1}})
      }else{
         if(this.text.replaceAll(" ", "")==''){
             this.pac='请输入内容'
         }else{
            console.log(this.userName,this.text);
            this.datapl.push({r_info:this.text,mobile:this.userName})
            this.text=''
         } 
      }
  },
  zu(){
      this.hidden=false;
      this.pay=1;
  },
        add(){
            this.pay=0;
          this.hidden=false
         this.RemoveScroll();
        },
        login2(){
           this.AddScroll();
            if(!this.login){
            this.$router.push({name:'login',query:{history:1,add:1}})
            }else{
            this.hidden=true;
            if(!this.pay){this.axios.post('/v1/user/list',`uid=${this.userName}&hid=${this.$route.query.lid}`).then(res=>{
                console.log(res)
                 
               })}else{
                     console.log(this.ds)
                   this.axios.post('v1/user/pay',`hid=${this.$route.query.lid}&hdaoqi=${new Date().getTime()+30000}`).then(res=>{
                       this.ds=1;
                       this.pay=0;
                   })
                   
               }
            
            }
            
        },
        chuan(){
            var a =this.$route.query.lid
            chuan.$on('data',data=>{
               this.axios.post('/v1/user/list',`uid=${this.userName}&hid=${a}`).then(res=>{
                   console.log(res.data)
               })
            })
        },
        axx(e){
           if(e.target.nodeName=='IMG'){
              this.num=e.target.dataset.num;
           }
        },
        next(){
            if(this.num<this.img.length-1){ this.num++;}
           
        },
        previous(){
            if(this.num>0){this.num--;}
        },
        xunh(){
             var zz=0;
               var yy= setInterval(()=>{
                    if(this.num<this.img.length-1&&zz==0){
                        this.num++
                    }else if(this.num==this.img.length-1&&zz==0){
                        zz=1;
                    }else if(this.num==0){
                        zz=0;
                    }else {
                        this.num--;
                    }
                },1000)
                
        },
        windowScroll() {
     let scrollTop = window.pageYOffset || document.documentElement.scrollTop || document.body.scrollTop;
      this.scrolltop=scrollTop;
  }
    },
    mounted(){
//         this.chuan();
//         this.height=document.body.scrollHeight+'px';
//         (function scrollWindow(){
//   window.scrollTo(0,0);
// })();
// window.addEventListener('scroll', this.windowScroll)
 
if(this.$route.query.type){this.axios.get(`/v1/house/shiyou`,{params:{hid:this.$route.query.lid,cid:this.cid}}).then(res=>{
            console.log(res.data);
            this.day=[];
            this.img=[];
            this.tag=[];
           var str= res.data[0].htags.split('/');
           console.log(res.data)
            for(var i of str){
                this.tag.push(i)
            } 
            for(var i of res.data){
                this.day.push(i.h_grade)
                this.img.push(i.purl)
            }
            this.data=res.data[0];
        })}else{
            this.axios.get(`/v1/house/qiu`,{params:{hid:this.$route.query.lid,cid:this.cid}}).then(res=>{
            console.log(res.data);
            this.day=[];
            this.img=[];
            this.tag=[];
           var str= res.data[0].htags.split('/');
           console.log(res.data)
            for(var i of str){
                this.tag.push(i)
            } 
            for(var i of res.data){
                this.day.push(i.h_grade)
                this.img.push(i.purl)
            }
            this.data=res.data[0];
        })
        }
         this.axios.get('/v1/house/pl',{params:{hid:this.$route.query.lid}}).then(res=>{
             console.log(res.data)
            this.datapl=res.data;
        })
            
    }
}
</script>
<style scoped>
.kuang>span{
    height: 45px;
    line-height: 45px;
    background-color: rgb(211, 211, 211);
    padding: 0px 30px;
    border-radius: 5px;
    color: white;
    font-size: 16px;
    cursor:pointer
}
.kuang span:last-child{
   background-color: #ee3843;
}
.kuang span:last-child:hover{
    background-color:#d62c37
}
.xxx>span{
display:inline-block;height:45px;line-height:45px;
padding:0 30px;
border: 2px solid #ee3843;
color:#ee3843
}
.el-input .el-input__count .el-input__count-inner{
    background: #FFF;
    line-height: initial;
    display: inline-block;
    padding: 0 5px;
    position: relative;
    top: -17px;
    transform: rotate(135deg)
}
.el-input{
    height: 40px;
}
.xxx>span:hover{
    cursor: pointer;
    background-color:#ee3843;
    color:white
}
.clear>ul>li{
    float: left;color:#959595;width: 190px;position: relative;height: 24px;line-height: 24px;font-size: 15px;padding:5px 0
}

.clear>ul>li>span{
display: block;width: 130px;overflow: hidden;text-overflow: ellipsis;white-space: nowrap;position: absolute;top: 5px;left: 40px;font-size: 15px;height: 24px;line-height: 24px;color:#3a3b3c
}
.clear::after{
    content: '';
    display: block;
    clear: both;
}
#container {width:1190px; height: 420px;margin: 0 auto; }  
.p-main .p-mx .tran{
  transition: .5s;
}
        body {
            margin: 0;
            padding: 0;
            font-size: 18px;
            -webkit-user-select: none;
            -moz-user-select: none;
            -ms-user-select: none;
            user-select: none;
        }
        
        .tou li {
            
            font-size: 14px;
            line-height: 45px;
            width: 100px;
            text-align: center;
            color: #666666;
            display: inline-block;
            margin-left: 10px;
     
        }
        .qfd .ly{
            width: 50px;
    height: 30px;
    margin-top: 15px;
    text-align: center;
    line-height: 30px;
    float: right;
    background-color: #e93843;
    padding: 0px 12px;
    color: white;
    font-size: 14px;
    border-radius: 2px;
     cursor: pointer;
        }
        .qfd .ly:hover{
            background-color:#c1242d ;
        }
        ul {
            list-style: none;
            margin: 0;
            padding: 0;
        }
        
        .main-m {
            background-color: #fff;
        }
        
        .main-b>div>ul>li {
            font-size: 15px;
            text-indent: 35px;
            height: 30px;
            line-height: 30px;
            width: 200px;
        }
        
        .main-b>div>input {
            margin-left: 30px;
            outline: none;
            border: 1px solid #dedede;
            height: 29px;
            width: 300px;
        }
        
        .h_right ul {
            margin-left: -40px;
        }
        
        .main-b>div:nth-child(2)>input {
            margin-left: 30px;
            outline: none;
            border: 1px solid #dedede;
            height: 29px;
            width: 150px;
        }
        
        .main-b>div:nth-child(2)>input:last-child {
            margin-left: 0;
            margin-right: 5px;
        }
        
        .main-b>div:nth-child(3)>div>input {
            margin-left: 30px;
            outline: none;
            border: 1px solid #dedede;
            height: 29px;
            width: 150px;
            position: relative;
            z-index: 999;
        }
        /* .main-b div:nth-child(1) {
    margin-left: 2px;
} */
        
        .main-b>div {
            height: 80px;
            float: left;
            width: 394px;
            border-right: 1px solid #e5e5e5;
        }
        
        .main-b>div:last-child {
            border-right: 0;
        }
        
        .main-m>div>ul li {
            float: left;
            font-size: 17px;
            cursor: pointer;
            font-weight: 600;
            width: 50px;
            line-height: 75px;
            border-bottom: 4px solid red;
            padding: 0 10px;
        }
        
        main .p-main {
            background-color: #f2f2f2;
            padding-bottom: 20px;
            height: auto;
        }
        
        main .p-main>div {
            width: 1190px;
            margin: 0 auto;
            height: auto;
        }
        
        .p-main .p-mx>div>div>div:nth-child(1) {
            float: left;
            width: 599px;
            height: 450px;
            overflow: hidden;
        }
        .qfd>div{
            height: 60px;
            
        }
        .qfd>div>p{
            padding: 0;
            margin: 0;
            height: 30px;
            line-height: 30px;
            width: auto;
            font-size: 14px;
        }
        .p-main .p-mx>div>div>div:nth-child(1)>ul {
            width: 599px;
        }
        
        .p-main .p-mx>div>div>div:nth-child(1)>ul>li {
            height: 450px;
            text-align: center;
            line-height: 450px;
            background-color: #fff;
        }
        
        .p-main .p-mx>div>div>div:nth-child(1)>ul>li>img {
            max-width: 100%;
            max-height: 100%;
            vertical-align: middle;
        }
        
        .p-main .p-mx>div>div>div:nth-child(2) {
            float: right;
            width: 160px;
        }
        
        .fu .p-infof {
            border-top: 1px solid #ededed;
            border-bottom: 1px solid #ededed;
            margin: 10px 0;
            padding: 10px 0;
        }
        .qfd::after{
            content: '';
            display: block;
            clear: both;
        }
        .fu .p-infof>span {
            display: inline-block;
            width: 90px;
            height: 40px;
            border-right: 1px solid #ededed;
            text-align: center;
            line-height: 40px;
        }
        
        .fu .p-infof>span:first-child {
            width: 180px;
        }
        
        .fu .p-infof>span:last-child {
            border-right: 0;
        }
        
        .p-main .p-mx>div>div>div:nth-child(2)>div {
            text-align: center;
            overflow: hidden;
            height: 25px;
            background-color: #c3c3c3;
            cursor: pointer;
        }
        
        .p-main .p-mx>div>div>div:nth-child(2)>div:hover {
            background-color: #9f9f9f;
        }
        
        .p-main .p-mx>div>div>div:nth-child(2)>div:first-child>span {
            width: 15px;
            height: 15px;
            display: inline-block;
            transform: rotateZ(45deg);
            border-top: 1px solid white;
            border-left: 1px solid white;
            margin-top: 10px;
        }
        
        .p-main .p-mx .p-xx {
            margin-top: 20px;
            background-color: #fff;
        }
        
        .p-main .p-mx .p-pl {
            margin-top: 20px;
            background-color: #fff;
        }
        
        .p-main .p-mx .p-pl>div:nth-child(1) {
            width: 740px;
            float: none;
            height: 50px;
            padding: 15px;
            border-bottom: 2px solid #ededed;
            line-height: 50px;
        }
        
        .p-main .p-mx .p-pl>div:nth-child(2) {
            float: none;
            height: auto;
            padding: 15px;
            width: 740px;
            /* border-bottom: 2px solid #ededed; */
        }
        
        .p-main .p-mx .p-pl>div:nth-child(2)>div:nth-child(2) {
            /* background-color: grey; */
            margin-left: 80px;
            height: auto;
            text-align: left;
        }
        
        .p-main .p-mx .p-pl>div:nth-child(2)>div:nth-child(1) {
            background-color: white;
            cursor: auto;
            height: 60px;
        }
        
        .p-main .p-mx .p-pl>div:nth-child(2)>div:nth-child(1):hover {
            background-color: #fff;
        }
        
        .p-main .p-mx .p-pl>div:nth-child(2)>div:nth-child(1)>div:first-child {
            float: left;
            width: 60px;
            height: 60px;
            border-radius: 50%;
            background-color: gainsboro;
        }
        
        .p-main .p-mx .p-pl>div:nth-child(2)>div:nth-child(1)>div:first-child>img {
            width: 90%;
            height: 90%;
        }
        
        .p-main .p-mx .clear {
            background-color: #fff;
        }
        
        .p-main .p-mx .fu {
            float: right;
            background-color: #fff;
            width: 400px;
            margin-left: 20px;
            position: sticky;
            top: 0;
        }
        
        .p-main .p-mx .fu>div {
            margin: 10px;
            width: 380px;
        }
        
        /* .p-main .p-mx .fu>div>div {} */
        
        h1 {
            margin: 0;
            padding: 0;
        }
        
        .p-main .p-mx .fu>div>div:nth-child(1) {
            width: 380px;
            float: none;
            height: auto;
            text-overflow: ellipsis;
        }
        
        .p-main .p-mx .fu>div>div:nth-child(2) {
            width: 380px;
    float: none;
    height: auto;
    padding-top: 20px;
    padding-bottom: 20px;
    border-top: 1px solid #f2f2f2;
    border-bottom: 1px solid #f2f2f2;
   
        }
        
        .p-main .p-mx .fu>div>div:nth-child(2)>ul>li {
            float: left;
            height: 30px;
            line-height: 30px;
            margin-right: 5px;
            font-size: 14px;
            color: #9b9b9b;
            
        }
        
        .p-main .p-mx .fu>div>div:nth-child(2)>ul>li>span {
            background-color: #f6f6f6;
            margin: 5px 5px 5px 0;
            padding: 5px;
        }
        
        .p-main .p-mx .fu>div>div:nth-child(1)>h1 {
          font-size: 24px;
    font-weight: 500;
    text-shadow: 0 0 1px #bea7a7;
    width: 235px;
    padding-right: 140px;
    position: absolute;
    height: 30px;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
        }
        
        .p-main .p-mx .fu>div>div:nth-child(1)>p {
                margin-top: 40px;
    color: #979798;
    height: 50px;
    margin-bottom: 20px;
    line-height: 50px;
        }
        
        .p-main .p-mx .p-pl>div:nth-child(2)>div:nth-child(1)>div:last-child {
            text-align: left;
            line-height: 60px;
            float: left;
            font-size: 14px;
            margin-left: 20px;
        }
        
        .p-main .p-mx .p-pl>div:nth-child(2)>div:nth-child(2)>div>ul {
            background-color: #fff;
        }
        
        .p-main .p-mx .p-pl>div:nth-child(2)>div:nth-child(2)>div>ul>li {
            margin: 10px 0;
            background-color: #fff;
            overflow: hidden;
            font-size: 15px;
        }
        
        .p-main .p-mx .p-pl>div:nth-child(3) {
             margin: 0 15px;
    text-align: right;
    color: #484848;
    font-size: 15px;
    border-top: 2px solid #ededed;
    height: 45px;
    line-height: 45px;
        }
        
        .p-main .p-mx .p-pl>div:nth-child(2)>div:nth-child(1)>div:last-child>h6 {
            height: 30px;
            line-height: 30px;
            margin: 0;
            padding: 0;
            font-size: 16px;
            font-weight: 400;
        }
        
        .p-main .p-mx .p-pl>div:nth-child(2)>div:nth-child(1)>div:last-child>p {
            height: 30px;
            line-height: 30px;
            margin: 0;
            padding: 0;
            color: grey
        }
        
        .p-main .p-mx .p-pl>div:nth-child(1)>span:nth-child(1) {
            font-size: 24px;
            line-height: 50px;
            float: left;
            /* text-align: center; */
        }
        

        
.el-rate {
    height: 20px;
    line-height: 1;
    margin-top: 15px;
     margin-left: 110px;
}
        
        .p-main .p-mx .p-pl>div:nth-child(2) {
            width: 740px;
            float: none;
        }
        
        .p-main .p-mx .p-xx>div:nth-child(1) {
            padding: 15px;
            float: none;
            height: auto;
        }
        
        .p-main .p-mx .p-xx>div:nth-child(1)>span {
            display: inline-block;
            padding: 0 5px;
            font-size: 24px;
            color: #bababa;
        }
        
        .p-main .p-mx .p-xx>div:nth-child(1)>span:first-child {
            color: #3a3b3c;
        }
        
        .p-main .p-mx .p-xx>div:nth-child(2) {
            float: none;
        }
        
        .p-main .p-mx .p-xx>div:nth-child(2)>ul {
            width: 770px;
            display: flex;
            justify-content: left;
            flex-wrap: wrap;
        }
        
        .p-main .p-mx .p-xx>div:nth-child(2)>ul>li {
            height: 100px;
            width: 128px;
            text-align: center;
            line-height: 100px;
        }
        
        /* .p-main .p-mx .p-xx>div:nth-child(2)>ul>li>img {
            height: 100%;
    width: 100%;
        } */
        
        .p-main .p-mx>div>div>div:nth-child(2)>div:last-child>span {
            width: 15px;
            height: 15px;
            display: inline-block;
            transform: rotateZ(-135deg);
            border-top: 1px solid white;
            border-left: 1px solid white;
            margin-bottom: 10px;
        }
        
        .p-main .p-mx>div>div>div:nth-child(2)>div:nth-child(2)>ul {
            width: 160px;
        }
        
        .p-main .p-mx>div>div>div:nth-child(2)>div:nth-child(2)>ul li {
            height: 120px;
            margin-top: 10px;
        }
        
        .p-main .p-mx>div>div>div:nth-child(2)>div:nth-child(2)>ul li .on_choose {
            width: 156px;
            height: 116px;
            border: 2px solid red;
        }
        
        .p-main .p-mx>div>div>div:nth-child(2)>div:nth-child(2)>ul li>img {
            width: 100%;
            height: 100%;
        }
        
        .p-main .p-mx>div>div>div:nth-child(2)>div:nth-child(2) {
            background-color: #fff;
            height: 400px;
        }
        
        .p-main .p-mx>div {
            width: 770px;
        }
        
        .main-m>div>ul li:nth-child(2) {
            border-bottom: 2px solid transparent;
            font-weight: 500;
        }
        
        /* body header div div .h_left ul li:nth-child(5) a {
            color: #fcd7d9;
        } */
        
        body header div div .h_left ul li:nth-child(5) div {
            position: absolute;
            width: 42px;
            height: 3px;
            bottom: 0;
            background-color: white;
        }
        
        .tou li:nth-child(2n) {
            width: 44px;
            text-align: center;
            margin-left: -12px;
        }
        
        .san li {
            height: 55px;
            margin: 10px 0;
            text-align: center;
            line-height: 55px;
            background-color: white;
            border-radius: 5px;
            box-shadow: 0px 0px 9px 2px #cccccc;
        }
        
        #hid {
            position: relative;
        }
        
        .san>li>div {
            visibility: hidden;
        }
        
        .san>li>div>div:nth-child(1) {
            position: absolute;
            top: 0;
            right: 0;
            width: 75px;
            height: 30px;
            background-color: #38393a;
            color: white;
            font-size: 14px;
            line-height: 30px;
        }
        
        .san>li>div>div:nth-child(2) {
            position: absolute;
            top: 7px;
            right: -16px;
            border: 8px solid #38393a;
            border-color: transparent transparent transparent #38393a;
        }
        
        .tou li:nth-child(1):hover {
            color: red;
            cursor: pointer;
        }
        
        .clear::after {
            content: '';
            display: block;
            clear: both;
        }
        
        .clear2::before {
            content: '';
            display: block;
            clear: both;
        }
        
        .list {
            margin-top: 20px;
            width: 900px;
            position: relative;
            float: left;
        }
        
        .list>ul li {
            background-color: #fff;
            height: 150px;
            padding: 30px;
            margin-bottom: 20px;
        }
        
        .list>ul>li>div>div>h3>a {
            text-decoration: none;
            color: black;
            font-weight: 300;
        }
        
        .list>ul>li>div>p>span {
            display: inline-block;
            margin-right: 20px;
            padding-left: 20px;
            color: red;
            font-size: 14px;
            background-repeat: no-repeat;
            background-position: left;
        }
        
        .list>ul>li>div {
            float: left;
        }
        
        .list>ul>li>div:nth-child(2) {
            margin-left: 20px;
        }
        
        .tou li:nth-child(3),
        .tou li:nth-child(5),
        .tou li:nth-child(7) {
           width: 80px;
    margin-left: -15px;
    height: 45px;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
        }
        
        body .onck {
            position: absolute;
            width: 100%;
            height: 100%;
            display: none;
            background-color: rgba(0, 0, 0, 0.7);
            z-index: 1000;
        }
        
        #chos li:hover {
            background-color: #ededed;
        }
        
        #chos {
            position: relative;
            top: -60px;
            left: 30px;
            width: 150px;
            height: 58px;
            font-size: 14px;
            border: 1px solid #dedede;
            border-top: 0;
            z-index: 500;
        }
        
        #chos li {
            cursor: pointer;
            height: 29px;
            padding-left: 10px;
            line-height: 29px;
            background-color: white;
        }
        
        body .onck>div {
            position: sticky;
            width: 700px;
            height: 400px;
            background-color: white;
            top: calc(50% - 200px);
            left: calc(50% - 350px);
            z-index: 1000;
            border-radius: 5px;
        }
        
        body .onck>div>div:nth-child(1) {
            margin: 0 auto;
            width: 600px;
            border-bottom: 1px solid #b6b1b1;
        }
        
        body .onck>div>div:nth-child(1) h2 {
            display: inline-block;
            padding: 25px 0;
            margin: 0 auto;
            font-size: 20px;
            font-weight: 300;
        }
        
        body .onck>div>div:nth-child(1) .fis {
            display: inline-block;
            margin-left: 290px;
            color: grey;
            font-size: 16px;
        }
        
        body .onck>div>div:nth-child(1) .fis~span {
            cursor: pointer;
            color: grey;
            font-size: 16px;
        }
        
        body .onck>div>div:nth-child(1) .fis~span:hover {
            color: red;
        }
        
        body .onck>div>div:nth-child(1) ul {
            list-style: none;
        }
        
        body .onck>div>div:nth-child(1) ul li {
            float: left;
        }
        
        body .onck>div>div:nth-child(2) {
            margin: 0 auto;
            width: 600px;
            height: 300px;
        }
        
        body .onck>div>div:nth-child(2) ul {
            list-style: none;
            margin: 0;
            padding: 0;
        }
        
        body .onck>div>div:nth-child(2) ul li {
            width: 300px;
            float: left;
            margin: 15px 0;
        }
        
        body .onck>div>div:nth-child(2) ul li span {
            display: inline-block;
            width: 30px;
        }
        
        body .onck>div>div:nth-child(2) ul li a {
            margin-left: 20px;
            text-decoration: none;
            color: grey;
            font-size: 16px;
        }
        
        body .onck>div>div:nth-child(2) ul li a:hover {
            color: red;
        }
        
        body .onck>div>div:nth-child(3) {
            position: absolute;
            width: 20px;
            height: 20px;
            top: -10px;
            right: 0;
            cursor: pointer;
        }
        
        body header div {
            height: 40px;
            background-color: #ee3843;
        }
        
        body header div div {
            font-size: 14px;
            height: 100%;
            margin: 0 auto;
            width: 1190px;
            color: #ffffff;
        }
        
        body header div div ul {
            margin: 0;
            padding: 0;
            list-style: none;
        }
        
        body header div div .h_left {
            width: 800px;
            float: left;
        }
        
        body header div div .h_left ul li:nth-child(1) {
            cursor: auto;
        }
        
        body header div div .h_left ul li {
            cursor: pointer;
            position: relative;
            line-height: 40px;
            float: left;
            margin: 0 25px;
        }
        
        body header div div .h_left ul li span:nth-child(1) {
            display: inline-block;
            width: 20px;
        }
        
        body header div div .h_left ul li a {
            color: #ffffff;
            text-decoration: none;
        }
        
        body header div div .h_left ul li:hover a {
            color: #fcd7d9;
        }
        
        body header div div .h_left ul li:after {
            content: '';
            width: 0;
            height: 3px;
            background: #ffffff;
            position: absolute;
            top: 93%;
            left: 50%;
            transition: .3s;
        }
        
        body header div div .h_left ul li:nth-child(2):hover:after,
        body header div div .h_left ul li:nth-child(3):hover:after,
        body header div div .h_left ul li:nth-child(4):hover:after,
        body header div div .h_left ul li:nth-child(5):hover:after,
        body header div div .h_left ul li:nth-child(6):hover:after,
        body header div div .h_left ul li:nth-child(7):hover:after {
            left: 0%;
            width: 100%;
        }
        
        body header div div .h_right {
            width: 120px;
            float: right;
        }
        
        body header div div .h_right a {
            color: #ffffff;
            text-decoration: none;
            line-height: 40px;
            padding: 0 10px;
        }
        
        body header div div .h_right a:hover {
            cursor: pointer;
            color: #fcd7d9;
        }
        
        body footer .f_up {
            height: 190px;
            background-color: #d72a3a;
            background-position: center;
            position: relative;
        }
        
        body footer .f_up>div {
            margin: 0 auto;
            width: 1190px;
            height: 100%;
        }
        
        body footer .f_up>div div:nth-child(1) {
            width: 200px;
            height: 100%;
            position: absolute;
            top: 21px;
        }
        
        body footer .f_up>div div:nth-child(2) {
            margin-left: 300px;
            width: 990px;
            height: 100%;
        }
        
        body footer .f_up>div div:nth-child(2) img {
            height: 150px;
            margin-top: 15px;
        }
        
        body footer .f_down {
            /* height: 720px; */
            background-color: #3b3d42;
        }
        
        body footer .f_down ul {
            list-style: none;
            margin: 0;
            padding: 0;
        }
        
        body footer .f_down>div {
            width: 1190px;
            height: 100%;
            margin: 0 auto;
        }
        
        body footer .f_down>div>div:nth-child(2)>div:nth-child(2) {
            border-bottom: 0;
        }
        
        body footer .f_down>div>div:nth-child(2)>div:nth-child(2)>p {
            margin: 5px 0;
            padding: 0;
            font-weight: 300;
        }
        
        body footer .f_down>div>div:nth-child(2)>div:nth-child(2)>p img {
            margin-bottom: -4px;
        }
        
        body footer .f_down>div>div:nth-child(2)>div:nth-child(2)>p>span:nth-child(1) {
            display: inline-block;
            width: 300px;
        }
        
        body footer .f_down>div>div:nth-child(2)>div:nth-child(1) {
            margin-top: 10px;
            width: 1190px;
            border-bottom: 0;
            color: #aaacb3;
        }
        
        body footer .f_down>div>div:nth-child(2)>div:nth-child(1) div:nth-child(1) {
            float: left;
            width: 650px;
            border-right: 1px solid #595b5f;
        }
        
        body footer .f_down>div>div:nth-child(2)>div:nth-child(1) div:nth-child(2) {
            float: right;
            width: 450px;
        }
        
        body footer .f_down>div>div:nth-child(2)>div:nth-child(1) div:nth-child(2) img {
            margin-left: 20px;
            margin-top: 15px;
        }
        
        body footer .f_down>div>div:nth-child(2)>div:nth-child(1) div:nth-child(2)>div:nth-child(1) {
            width: 250px;
            float: left;
            border-right: 0;
        }
        
        body footer .f_down>div>div:nth-child(2)>div:nth-child(1) div:nth-child(2)>div:nth-child(2) {
            width: 200px;
            float: left;
        }
        
        body footer .f_down>div>div:nth-child(2)>div:nth-child(1) div ul li a {
            text-decoration: none;
            color: #aaacb3;
            font-size: 18px;
        }
        
        body footer .f_down>div>div:nth-child(2)>div:nth-child(1) div ul li a:hover {
            color: #fff;
        }
        
        body footer .f_down>div>div:nth-child(2)>div:nth-child(1) div ul li {
            margin-right: 80px;
            float: left;
        }
        
        body footer .f_down>div>div:nth-child(2)>div:nth-child(1) div ul li p {
            font-weight: 500;
            margin: 5px 0;
            font-size: 16px;
            color: #8b8d92;
        }
        
        body footer .f_down>div>div:nth-child(2)>div:nth-child(1) div ul li p:hover {
            color: white;
            cursor: pointer;
        }
        
        body footer .f_down>div>div>div {
            border-bottom: 1px solid #595b5f;
            padding-top: 20px;
            padding-bottom: 20px;
        }
        
        body footer .f_down>div>div>div ul {
            padding-top: 5px;
        }
        
        body footer .f_down>div>div>div>ul li {
            float: left;
            margin-right: 10px;
        }
        
        body footer .f_down>div>div>div>ul li a {
            text-decoration: none;
            color: #8b8d92;
        }
        
        body footer .f_down>div>div>div>ul li a:hover {
            color: #ffffff;
        }
        
        body footer .f_down>div>div>div::after {
            content: '';
            display: block;
            clear: both;
        }
        
        body footer .f_down>div p {
            text-align: left !important;
            margin: 0;
            font-weight: 600;
            color: #aaacb3;
        }
        /*# sourceMappingURL=moban.css.map */
</style>
